<script lang="ts">
  import { List, Li } from "flowbite-svelte";
</script>

<List tag="ol" class="list-decimal text-gray-500 dark:text-gray-400">
  <Li>
    List item one
    <List tag="ul" class="mt-2 space-y-1 ps-5">
      <Li>You might feel like you are being really "organized" o</Li>
      <Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
      <Li>Nesting tons of folders in your source code is also not helpful.</Li>
    </List>
  </Li>
  <Li>
    List item two
    <List tag="ul" class="mt-2 space-y-1 ps-5">
      <Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
      <Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
      <Li>If you nest four levels deep you belong in prison.</Li>
    </List>
  </Li>
  <Li>
    List item three
    <List tag="ul" class="mt-2 space-y-1 ps-5 text-gray-500 dark:text-gray-400">
      <Li>Again please don't nest lists if you want</Li>
      <Li>Nobody wants to look at this.</Li>
      <Li>I'm upset that we even have to bother styling this.</Li>
    </List>
  </Li>
</List>
